<!--父级页面:控制除了登录页以外的所有子页面的头部与左侧菜单栏-->
<template>
  <div style="display: flex;">
    <!--左侧菜单栏-->
    <div style="width: 250px;">
      <el-menu
          background-color="#3c82f5"
          style="width:100%;height:100vh;"
          text-color="#fff"
          active-text-color="#ff0"
          unique-opened
          router
          :collapse-transition="false"
      >
        <el-row style="padding: 10px 0;">
          <el-col :span="4"></el-col>
          <el-col span="20">
            <span style="color:#fff; font-weight: bold;position: relative;top: 8px;left: 4px; ;">XX商城员工管理平台</span>
          </el-col>
        </el-row>
        <el-sub-menu index="1">
          <template #title>
            <el-icon><User/></el-icon><span>账号管理</span>
          </template>
          <el-menu-item index="/userOperation">用户管理</el-menu-item>
        </el-sub-menu>
<!--        <el-sub-menu index="2">-->
<!--          <template #title>-->
<!--            <el-icon><Van/></el-icon><span>内容管理</span>-->
<!--          </template>-->
<!--          <el-menu-item index="/articleOperation">文章管理</el-menu-item>-->
<!--        </el-sub-menu>-->
<!--        <el-sub-menu index="3">-->
<!--          <template #title>-->
<!--            <el-icon><Location/></el-icon><span>商城管理</span>-->
<!--          </template>-->
<!--          <el-menu-item index="/shoppingMallOperation">商品列表</el-menu-item>-->
<!--        </el-sub-menu>-->
      </el-menu>
    </div>
    <div style="width:calc(100% - 208px)">
      <!--右侧顶部条-->
      <el-header style="padding-top: 22px;height: 10vh;background-color:#fff;">
        <el-row :gutter="10">
          <el-col :span="18">
          </el-col>
          <el-col :span="6" style="position:relative;">
            <el-dropdown trigger="click" style="position:absolute; right: 20px;">
              <span style="font-size: 19px; font-weight: bold;">
<!--                {{user.username}}-->
                <el-icon ><arrow-down/></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
        <!--面包屑导航-->
        <el-breadcrumb separator="/" style="position:relative; top: 20px;">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadcrumb">{{item}}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <!--右侧主体内容(可变区域)-->
      <el-main style="height: 90vh;padding: 0;overflow-y: auto;">
        <router-view/>
      </el-main>
    </div>


  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";

// 获取当前登录的用户数据
const user = ref();
// const user = ref(getUser());

//定义一个退出登录的方法
const logout = ()=>{
  if(confirm('您确认要退出登录吗？')){
    localStorage.removeItem('user');
    window.location.href = '/login';
    user.value = '';
  }
}

//定义数组用来维护面包屑导航当前展示的值
const breadcrumb = ref([]);

//定义对象用来维护路由path与面包屑数组值的对应关系
let map = {
  '/user':['员工管理','员工列表'],
};

const route = useRoute();
//定义一个更新面包屑值的方法，只要路由发生变化，立即触发更新面包屑
const updateBreadcrumb = (route)=>{
  const path = route.path;
  breadcrumb.value=map[path];
}
onMounted(()=>{
  updateBreadcrumb(route);
})

const router = useRouter();
router.beforeEach((to,from,next)=>{
  updateBreadcrumb(to);
  next();
})
</script>
